<template>
  <div class="index-box">
    <!-- <Liner id="line1"></Liner> -->
    <div class="left">
      <div class="all-view e-box">
          <div class="all-view-content">
            <div class="item">
              <span>2,190</span>
              <span class="text"> 设备总数</span>
            </div>
            <div class="item">
              <span>190</span>
              <span class="text"> 季度新增</span>
            </div>
            <div class="item">
              <span>3001</span>
              <span class="text"> 运营设备</span>
            </div>
            <div class="item">
              <span>208</span>
              <span class="text"> 异常设备</span>
            </div>
          </div>
      </div>
      <div class="device  e-box">
        <Liner id="line"></Liner>
      </div>
      <div class="position  e-box">
        <pie id="pie"></pie>
      </div>
    </div>
    <div class="center">
      <div class="map ">
        <air-line id="air"></air-line>
      </div>
      <div class="statistic  e-box">
        <k-line id="k-line"></k-line>
      </div>
    </div>

    <div class="right">
      <div class="order  e-box all-view">
          <div class="all-view-content">
            <div class="item">
              <span>2,190</span>
              <span class="text"> 设备总数</span>
            </div>
            <div class="item">
              <span>190</span>
              <span class="text"> 季度新增</span>
            </div>
            <div class="item">
              <span>3001</span>
              <span class="text"> 运营设备</span>
            </div>
            <div class="item">
              <span>208</span>
              <span class="text"> 异常设备</span>
            </div>
          </div>
      </div>
      <div class="sale">
        <div class="sale-left e-box">
          <Earth id="e1"></Earth>
        </div>
        <div class="sale-right e-box">
          <Gauge id="g1"></Gauge>
        </div>
      </div>
      <div class="rank  e-box">
        <Radar id="radar"></Radar>
      </div>
    </div>
  </div>
</template>

<script>
import Liner from '../components/Line'
import Pie from '../components/Pie'
import AirLine from '../components/AirLine'
import KLine from '../components/KLine'
import Radar from '../components/Radar'
import Earth from '../components/Earth'
import Gauge from '../components/Gauge'

export default {
  components: {
    Liner,
    Pie,
    AirLine,
    KLine,
    Radar,
    Earth,
    Gauge
  }
}
</script>

<style lang="less">
.index-box {
  height: 100%;
  width: 100%;
  display: flex;
  padding-top: 220px;
  background: url("../assets/images/logo.png") top center no-repeat,
    linear-gradient(135deg, #0c2770, #00040f);
  background-size: contain;
}

.left > div ,
.center > div,
.right > div {
  margin: 5px;
  width: 98%;
}

.left {
  flex: 3;
  display: flex;
  flex-direction: column;
  > * {
    padding: 10px;
  }
  .all-view {
    flex: 1;
  }
  .device {
    flex: 4;
  }
  .position {
    flex: 2;
  }
}
.center {
  flex: 4;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  padding-top: 120px;

  > * {
  }
  .map {
    flex: 2;
  }
  .statistic {
    flex: 1;
  }
}
.right {
  flex: 3;
  display: flex;
  flex-direction: column;
  > * {
    padding: 10px;
  }
  .sale {
    flex: 2;
    display: flex;
    .sale-left {
      margin-right: 10px;
    }
  }
  .order {
    flex: 1;
  }
  .rank {
    flex: 4
  }

}

.left > div .center > div .right > div {
  padding: 10px;
  border: 1px dashed pink;
}

.all-view-content {
  display: flex;
  height: 100%;
  .item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    color: #fff;
    .text {
      font-size: 60px;
      color: #4c9bfd;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      &::before {
        content: "";
        display: block;
        width: 8px;
        height: 16px;
        background: yellow;
        border-radius: 4px;
        margin-right: 10px;
      }
    }
  }
  .item:nth-child(2) .text::before {
    background: #fff;
  }
  .item:nth-child(3) .text::before {
    background: pink;
  }
  .item:nth-child(4) .text::before {
    background: red;
  }
}

  .e-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 40px solid transparent;
      border-width: 110px 120px 50px  50px;
      border-image-source: url('../assets/images/border.png');
      border-image-slice: 50 60 25  25;
    }

    @media screen and (max-width:770px) {
    .index-box {
      flex-direction: column;
      height: 300%;
      .left,
      .right,
      .center {
        flex: 1
      }
    }
}
</style>
